<!-- @format -->

<template>
  <view class="input-example">
    <text class="example-title">输入框组件示例</text>

    <!-- 基础用法 -->
    <view class="example-section">
      <text class="section-title">基础用法</text>
      <comp-input v-model="basicValue" placeholder="请输入文本" />
      <view class="example-value">当前值: {{ basicValue }}</view>
    </view>

    <!-- 输入框类型 -->
    <view class="example-section">
      <text class="section-title">输入框类型</text>
      <view class="input-row">
        <comp-input v-model="textValue" type="text" placeholder="文本输入框" />
        <comp-input
          v-model="passwordValue"
          type="password"
          placeholder="密码输入框"
        />
        <comp-input
          v-model="numberValue"
          type="number"
          placeholder="数字输入框"
        />
        <comp-input v-model="telValue" type="tel" placeholder="电话输入框" />
      </view>
    </view>

    <!-- 文本域 -->
    <view class="example-section">
      <text class="section-title">文本域</text>
      <comp-input
        v-model="textareaValue"
        type="textarea"
        placeholder="请输入多行文本"
        :rows="4"
      />
    </view>

    <!-- 禁用和只读 -->
    <view class="example-section">
      <text class="section-title">禁用和只读</text>
      <view class="input-row">
        <comp-input v-model="disabledValue" disabled placeholder="禁用状态" />
        <comp-input v-model="readonlyValue" readonly placeholder="只读状态" />
      </view>
    </view>

    <!-- 带标签 -->
    <view class="example-section">
      <text class="section-title">带标签</text>
      <comp-input
        v-model="labelValue"
        label="用户名"
        placeholder="请输入用户名"
      />
      <comp-input
        v-model="passwordWithLabelValue"
        label="密码"
        type="password"
        placeholder="请输入密码"
      />
    </view>

    <!-- 可清空 -->
    <view class="example-section">
      <text class="section-title">可清空</text>
      <comp-input
        v-model="clearableValue"
        clearable
        placeholder="输入后显示清除图标"
      />
    </view>

    <!-- 密码可见性切换 -->
    <view class="example-section">
      <text class="section-title">密码可见性切换</text>
      <comp-input
        v-model="togglePasswordValue"
        type="password"
        showPasswordToggle
        placeholder="点击眼睛图标切换可见性"
      />
    </view>

    <!-- 字数统计 -->
    <view class="example-section">
      <text class="section-title">字数统计</text>
      <comp-input
        v-model="limitedValue"
        :maxlength="20"
        showWordLimit
        placeholder="最多输入20个字符"
      />
      <comp-input
        v-model="textareaLimitedValue"
        type="textarea"
        :maxlength="50"
        showWordLimit
        placeholder="最多输入50个字符的多行文本"
        :rows="3"
      />
    </view>

    <!-- 错误提示 -->
    <view class="example-section">
      <text class="section-title">错误提示</text>
      <comp-input
        v-model="errorValue"
        :error="true"
        error-message="输入内容不符合要求"
        placeholder="错误状态"
      />
    </view>

    <!-- 前缀和后缀 -->
    <view class="example-section">
      <text class="section-title">前缀和后缀</text>
      <comp-input v-model="prefixValue" placeholder="带前缀的输入框">
        <template #prefix>
          <text class="input-icon">👤</text>
        </template>
      </comp-input>

      <comp-input v-model="suffixValue" placeholder="带后缀的输入框">
        <template #suffix>
          <text class="input-icon">@example.com</text>
        </template>
      </comp-input>

      <comp-input v-model="bothValue" placeholder="同时使用前缀和后缀">
        <template #prefix>
          <text class="input-icon">￥</text>
        </template>
        <template #suffix>
          <text class="input-icon">元</text>
        </template>
      </comp-input>
    </view>

    <!-- 自定义标签 -->
    <view class="example-section">
      <text class="section-title">自定义标签</text>
      <comp-input v-model="customLabelValue" placeholder="自定义标签内容">
        <template #label>
          <view class="custom-label">
            <text class="label-text">自定义标签</text>
            <text class="label-tip">（选填）</text>
          </view>
        </template>
      </comp-input>
    </view>

    <!-- 表单验证 -->
    <view class="example-section">
      <text class="section-title">表单验证</text>
      <view class="form-example">
        <comp-input
          v-model="emailValue"
          label="邮箱"
          placeholder="请输入邮箱"
          :error="emailError"
          :error-message="emailErrorMessage"
        />
        <comp-input
          v-model="phoneValue"
          type="tel"
          label="手机号"
          placeholder="请输入手机号"
          :error="phoneError"
          :error-message="phoneErrorMessage"
        />
        <!-- <button class="submit-button" @click="validateForm">提交</button> -->
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import CompInput from './Index.vue';
  // 基础用法
  const basicValue = ref('');

  // 输入框类型
  const textValue = ref('');
  const passwordValue = ref('');
  const numberValue = ref('');
  const telValue = ref('');

  // 文本域
  const textareaValue = ref('');

  // 禁用和只读
  const disabledValue = ref('禁用状态');
  const readonlyValue = ref('只读状态');

  // 带标签
  const labelValue = ref('');
  const passwordWithLabelValue = ref('');

  // 可清空
  const clearableValue = ref('');

  // 密码可见性切换
  const togglePasswordValue = ref('');

  // 字数统计
  const limitedValue = ref('');
  const textareaLimitedValue = ref('');

  // 错误提示
  const errorValue = ref('');

  // 前缀和后缀
  const prefixValue = ref('');
  const suffixValue = ref('');
  const bothValue = ref('');

  // 自定义标签
  const customLabelValue = ref('');

  // 表单验证
  const emailValue = ref('');
  const emailError = ref(false);
  const emailErrorMessage = ref('');

  const phoneValue = ref('');
  const phoneError = ref(false);
  const phoneErrorMessage = ref('');

  // 验证邮箱
  const validateEmail = () => {
    const emailRegex = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
    if (!emailValue.value) {
      emailError.value = true;
      emailErrorMessage.value = '邮箱不能为空';
      return false;
    } else if (!emailRegex.test(emailValue.value)) {
      emailError.value = true;
      emailErrorMessage.value = '请输入有效的邮箱地址';
      return false;
    } else {
      emailError.value = false;
      emailErrorMessage.value = '';
      return true;
    }
  };

  // 验证手机号
  const validatePhone = () => {
    const phoneRegex = /^1[3-9]\d{9}$/;
    if (!phoneValue.value) {
      phoneError.value = true;
      phoneErrorMessage.value = '手机号不能为空';
      return false;
    } else if (!phoneRegex.test(phoneValue.value)) {
      phoneError.value = true;
      phoneErrorMessage.value = '请输入有效的手机号码';
      return false;
    } else {
      phoneError.value = false;
      phoneErrorMessage.value = '';
      return true;
    }
  };

  // 提交表单
  const submitForm = () => {
    const isEmailValid = validateEmail();
    const isPhoneValid = validatePhone();

    if (isEmailValid && isPhoneValid) {
      alert('表单验证通过！');
    } else {
      alert('表单验证失败，请检查输入！');
    }
  };

  // 重置表单
  const resetForm = () => {
    emailValue.value = '';
    phoneValue.value = '';
    emailError.value = false;
    emailErrorMessage.value = '';
    phoneError.value = false;
    phoneErrorMessage.value = '';
  };
</script>

<style lang="scss" scoped>
  .input-example {
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;

    .example-title {
      font-size: 24px;
      margin-bottom: 20px;
      color: #333;
      display: block;
    }

    .example-section {
      margin-bottom: 30px;

      .section-title {
        font-size: 18px;
        margin-bottom: 10px;
        color: #666;
        display: block;
      }

      .example-value {
        margin-top: 8px;
        color: #666;
        font-size: 14px;
      }

      .input-row {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 10px;

        // > * {
        width: 100%;
        margin-bottom: 10px;
        // }
      }
    }

    .form-example {
      border: 1px solid #eee;
      padding: 20px;
      border-radius: 8px;

      .submit-button {
        background-color: #4caf50;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 4px;
        margin-top: 15px;
        width: 100%;
      }
    }

    .input-icon {
      display: flex;
      align-items: center;
      justify-content: center;
      color: #999;
    }

    .custom-label {
      display: flex;
      align-items: center;

      .label-text {
        margin-right: 5px;
      }

      .label-tip {
        font-size: 12px;
        color: #999;
      }
    }
  }
</style>
